<template>
  <div class="myfavorite">
    <div>
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        text-color="#E6A23C"
        active-text-color="#E6A23C"
      >
        <el-row>
          <el-col :span="18">
            <el-menu-item index="1">处理中心</el-menu-item>
          </el-col>
          <el-col
            :span="6"
            style="height:56px;line-height:56px"
          >
            <el-button
              type="warning"
              size="small"
              @click="guanli"
            >批量管理</el-button>
            <el-button
              type="danger"
              plain
              v-if="isAll!=false"
              size="small"
              @click="delAll"
            >删除</el-button>
            <el-button
              type="primary"
              size="small"
              plain
              v-if="isAll!=false"
              @click="selectall"
            >全选</el-button>
          </el-col>
        </el-row>
        <span>
        </span>
      </el-menu>
    </div>
    <div class="shop_box">
      <div
        class="shop"
        v-for="item in favoriteshop"
        :key="item.id"
      >
        <div>
          <span>
            <el-checkbox-group
              v-model="quxiaoId"
              v-if="isAll!=false"
            >
              <el-checkbox
                :label="item.id"
                :key="item.id"
              >{{''}}</el-checkbox>
            </el-checkbox-group>
          </span>
          <img
            :src="'http://139.198.178.82:9090/Shopping/'+item.product.defaultImg"
            class="img"
          >
          <p class="shopname">{{item.product.name}}</p>
          <p style="text-align:center;color:orange">￥{{item.product.shopPrice/100}}</p>
          <el-row>
            <el-col
              :span="11"
              class="btn"
            >
              <a @click="DelShop(item.id)">取消收藏</a>
            </el-col>
            <el-col
              :span="11"
              class="btn"
            ><a @click="goto('/shopdetail','ShopDetail',item.productId)">查看详情</a></el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  name: "myfavorite",
  data() {
    return {
      activeIndex: "1",
      favoriteshop: [],
      quxiaoId: [],
      isAll: false,
      isSelect: false,
    };
  },
  methods: {
    getfavorite() {
      this.$post(this.url + "/wish/select", {
        userId: this.$store.state.user.id,
      }).then((res) => {
        if (res.errorCode == "0") {
          this.favoriteshop = res.data;
          this.favoriteshop.forEach((element) => {
            if (element.product == null) {
              this.DelShop(element.id);
            }
          });
        }
      });
    },
    // 删除收藏
    DelShop(id) {
      console.log(id);
      this.$post(this.url + "/wish/delete", {
        userId: this.$store.state.user.id,
        id: id,
      }).then((res) => {
        if (res.errorCode == "0") {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getfavorite();
        }
      });
    },
    handleSelect() {},
    // 批量删除
    guanli() {
      if (this.isAll == false) {
        this.isAll = true;
      } else {
        this.isAll = false;
        this.quxiaoId = "";
      }
    },
    delAll() {
      this.quxiaoId.forEach((element) => {
        this.$post(this.url + "/wish/delete", {
          userId: this.$store.state.user.id,
          id: element,
        }).then((res) => {
          if (res.errorCode == "0") {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getfavorite();
          }
        });
      });
    },
    // 全选
    selectall() {
      if (this.isSelect == false) {
        this.favoriteshop.forEach((element) => {
          this.quxiaoId.push(element.id);
        });
        this.isSelect = true;
      } else {
        this.quxiaoId = [];
        this.isSelect = false;
      }
    },
    goto(path, name, val) {
      sessionStorage.setItem("shopid", val);
      this.$router.push({
        path: path,
        name: name,
      });
    },
  },
  created() {
    this.getfavorite();
  },
};
</script>

<style scoped>
.shop_box {
  display: flex;
  flex-wrap: wrap;
}
.shop {
  margin-left: 15px;
  width: 22%;
  border: 1px solid lightgray;
}
.nav {
  display: flex;
}
.nav li {
  width: 100%;
  text-align: center;
  border: 1px solid lightgray;
}
.img {
  width: 100%;
  border: 1px solid lightgray;
}
p {
  margin: 10px;
}
.shopname {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shop_box {
  margin: 10px;
}
a {
  display: block;
  color: black;
}
</style>